import { AppstoreAddOutlined, AppstoreOutlined, DollarCircleOutlined, FileDoneOutlined, FundViewOutlined, GoldOutlined, LogoutOutlined, MailOutlined, PayCircleOutlined, ProfileOutlined, ProjectOutlined, PushpinOutlined, SettingOutlined, UserOutlined, UsergroupAddOutlined } from "@ant-design/icons";
import { App, Avatar, Flex, Form, Input, Menu, Modal } from "antd";
import { useContext, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import storage from "../storage";
import user_api, { USER_ROLE } from "../api/users";
import { Content } from "antd/es/layout/layout";
import { Global } from "../main";

function findMenuKeySelect(location) {
    if (location.indexOf('material') > -1) {
        return 'material'
    } else if (location.indexOf('payment') > -1) {
        return 'payment'
    } else if (location.indexOf('acount') > -1) {
        return 'acount'
    } else if (location.indexOf('overview-project') > -1) {
        return 'overview.project'
    } else if (location.indexOf('overview-provider') > -1) {
        return 'overview.provider'
    } else if (location.indexOf('project') > -1) {
        return 'project'
    } else if (location.indexOf('contract') > -1) {
        return 'contract'
    } else if (location.indexOf('provider') > -1) {
        return 'provider'
    } else if (location.indexOf('invoice') > -1) {
        return 'invoice'
    } else if (location.indexOf('acount') > -1) {
        return 'acount'
    } else {
        return 'material'
    }
}

export function AppHeader() {
    const items = [
        {
            label: '物料',
            key: 'material',
            icon: <GoldOutlined />,
        },
        {
            label: '付款',
            key: 'payment',
            icon: <PayCircleOutlined />,
        },
        {
            label: '发票',
            key: 'invoice',
            icon: <PushpinOutlined />,
        },
        {
            label: '项目',
            key: 'project',
            icon: <ProjectOutlined />,
        },
        {
            label: '合同',
            key: 'contract',
            icon: <FileDoneOutlined />,
        },
        {
            label: '供应商',
            key: 'provider',
            icon: <ProfileOutlined />
        },
        {
            label: '汇总',
            key: 'overview',
            icon: <FundViewOutlined />,
            children: [
                {
                    label: '项目汇总',
                    key: 'overview.project'
                },
                {
                    label: '供应商汇总',
                    key: 'overview.provider'
                },
            ],
        },
        {
            label: '账户',
            key: 'acount',
            icon: <UsergroupAddOutlined />
        },
    ];
    let location = useLocation()
    const [selectedKeys, setSelectedKeys] = useState([findMenuKeySelect(location.pathname)]);
    const navigate = useNavigate();
    const { message, modal } = App.useApp();
    const [repasswordForm] = Form.useForm();
    const [repwdModalOpen, setRepwdModalOpen] = useState(false)
    const { role } = useContext(Global)
    const user = storage.getUser();
    if (role === USER_ROLE.READONLY) {
        items[items.length - 1].disabled = true;
    }
    return <>
        <Flex justify="space-between" style={{ marginLeft: '10px', marginRight: '10px' }}>
            <h3>供应商及材料管理系统</h3>
            <Menu style={{ width: '80vw', display: 'flex', justifyContent: 'center' }} onClick={(e) => {
                setSelectedKeys(e.key);
                switch (e.key) {
                    case 'material':
                        navigate('/')
                        break;
                    case 'payment':
                        navigate('/payment')
                        break;
                    case 'invoice':
                        navigate('/invoice')
                        break;
                    case 'acount':
                        navigate('/acount')
                        break;
                    case 'project':
                        navigate('/project')
                        break;
                    case 'contract':
                        navigate('/contract')
                        break;
                    case 'provider':
                        navigate('/provider')
                        break;
                    case 'overview.project':
                        navigate('/overview-project')
                        break;
                    case 'overview.provider':
                        navigate('/overview-provider')
                        break;
                }
            }} selectedKeys={selectedKeys} mode="horizontal" items={items} />
            <Menu selectedKeys={[]} items={[{
                icon: <UserOutlined />,
                label: user?.username,
                key: 'acount',
                children: [
                    {
                        icon: <SettingOutlined />,
                        label: '修改密码',
                        key: 'acount.repassword'
                    },
                    {
                        icon: <LogoutOutlined />,
                        label: '登出',
                        key: 'acount.logout'
                    }
                ]
            }]} onClick={({ key }) => {
                switch (key) {
                    case 'acount.management':
                        navigate('/acount')
                        break;
                    case 'acount.repassword':
                        repasswordForm.resetFields();
                        setRepwdModalOpen(true);
                        break;
                    case 'acount.logout':
                        user_api.logout().then(() => {
                            storage.removeUser()
                            navigate('/login')
                        }).catch(e => message.error('登出失败'))
                        break;
                }
            }}></Menu>
            <Modal title="修改密码" maskClosable={false} open={repwdModalOpen} onOk={() => {
                repasswordForm.validateFields().then(data => {
                    user_api.updatePassword(data).then(() => {
                        setRepwdModalOpen(false)
                        navigate('/login')

                    }).catch(e => message.error(e.response.data))
                })
            }} onCancel={() => setRepwdModalOpen(false)} okText="确定" cancelText="取消">
                <Form form={repasswordForm}>
                    <Form.Item name={"password"} label='原密码' rules={[{
                        required: true,
                        message: "请输入原密码"
                    }]}>
                        <Input.Password></Input.Password>
                    </Form.Item>
                    <Form.Item name={"new_password"} label='新密码' rules={[{
                        required: true,
                        message: "请输入密码"
                    }]}>
                        <Input.Password></Input.Password>
                    </Form.Item>
                    <Form.Item name={"renew_password"} label='确认密码' rules={[{
                        required: true,
                        message: "请再次输入密码"
                    }]}>
                        <Input.Password></Input.Password>
                    </Form.Item>
                </Form>
            </Modal>
        </Flex>

        <Content style={{ margin: '10px' }}>
            <Outlet></Outlet>
        </Content>
    </>
}